<template>
    <div class="edit">
        <div class="edit-wrap">
            <div class="edit-tool">
                <div v-if="!isRun" class="run-btn" v-on:click="run"><i class="fa fa-play" aria-hidden="true"></i>运行</div>
                <div v-else class="run-btn" v-on:click="stop"><i class="fa fa-stop" aria-hidden="true"></i>停止</div>
                <div class="key-btn">
                    <div v-bind:class="UndoActive" class="Undo" v-on:click="Undo"><i class="fa fa-reply" aria-hidden="true"></i></div>
                    <div v-bind:class="RedoActive" class="Redo" v-on:click="Redo"><i class="fa fa-reply fa-flip-horizontal" aria-hidden="true"></i></div>
                </div>
            </div>
            <div class="edit-content">
                <label for="yourcode"></label>
                <textarea id="yourcode" v-model="initcode"></textarea>
            </div>
        </div>
    </div>
</template>

<script>
import SK from '../../static/runtime/skulpt'
import Editor from './common/editor'

export default {
  name: 'PyEdit',
  data () {
    return {
      UndoActive: '',
      RedoActive: '',
      initcode: Editor.getDefaultCode(),
      isRun: false
    }
  },
  mounted () {
    let that = this
    let editor = Editor.setEditor('yourcode')
    // 编辑器按键监听
    editor.on('keypress', function () {
      // 显示智能提示
      editor.showHint()
    })
    editor.on('inputRead', function () {
      that.UndoActive = 'undo'
    })
    editor.addKeyMap({
      'Backspace': function (cm) {
        that.UndoActive = 'undo'
        var ch = cm.getTokenAt(cm.getCursor())
        if (ch.type === 'field') {
          cm.execCommand('delWordBefore')
          cm.execCommand('delCharBefore')
        } else {
          cm.execCommand('delCharBefore')
        }
      }
    })
    this.editor = editor
    this.editor.doc.clearHistory()
  },
  methods: {
    run: function () {
      this.isRun = !this.isRun
      SK.runit(this.editor)
    },
    stop: function () {
      this.isRun = !this.isRun
      SK.stopit(this.editor)
    },
    Undo: function () {
      let done = this.editor.doc.history.done
      if (done.length === 2 || done.length === 3) {
        this.editor.undo()
        this.UndoActive = ''
        this.RedoActive = 'redo'
      }
      if (done.length > 3) {
        this.editor.undo()
        this.RedoActive = 'redo'
      }
      // console.log(this.editor.doc.history)
    },
    Redo: function () {
      // 获取撤回数组长度
      let undone = this.editor.doc.history.undone
      if (undone.length === 2 || undone.length === 3) {
        this.editor.redo()
        this.UndoActive = 'undo'
        this.RedoActive = ''
      }
      if (undone.length > 3) {
        this.editor.redo()
        this.UndoActive = 'undo'
      }
      // console.log(this.editor.doc.history)
    }
  }
}
</script>

<style scoped>
    .edit{
        display: inline-block;
        flex: 1;
        height: 100%;
        background-color: white;
        min-width: 500px;
        user-select: none;
        width: 100%;
    }
    .edit-wrap{
        /*display: flex;*/
        /*display: -webkit-flex;*/
        /*flex-direction: column;*/
        /*-webkit-flex-direction: column;*/
        /*flex-wrap: nowrap;*/
        height: 100%;
    }
    .edit-wrap>div,.key-btn,.Undo,.Redo{
        display: inline-block;
    }
    .edit-content{
        height:calc(100% - 105px);
        width: 100%;
        /*flex: 1;*/
    }
    .edit-tool{
        width:100%;
        height: 50px;
        border-bottom:1px solid lightgray;
        background-color: white;
        margin-top: 48px;
    }
    /* 运行按钮 */
    .run-btn{
        margin-left: 20px;
        display: inline-block;
        vertical-align: top;
        margin-top: 9px;
        width: 100px;
        height: 30px;
        border-radius: 20px;
        background-color: rgb(255,219,115);
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        cursor: pointer;
        color: rgb(99,89,42);
    }
    .run-btn:hover{
        background-color: rgb(246,207,92);
    }
    .run-btn>i{
        margin-right: 8px;
        font-size: 12px;
        color: rgb(99,89,42);
    }
    /* 快捷键 */
    .key-btn{
        margin-left: 30px;
    }
    .Undo{
        vertical-align: top;
        margin-top: 9px;
        width: 45px;
        height: 30px;
        border-radius: 20px;
        text-align: center;
        line-height: 30px;
        font-size: 16px;
        border: 1px solid lightgray;
        cursor: no-drop;
        color: rgb(180,180,180);
    }
    .Redo{
        vertical-align: top;
        margin-top: 9px;
        width: 45px;
        height: 30px;
        border-radius: 20px;
        text-align: center;
        line-height: 30px;
        font-size: 16px;
        border: 1px solid lightgray;
        cursor: no-drop;
        color: rgb(180,180,180);
        margin-left: 5px;
    }
    .undo,.redo{
        cursor: pointer;
        color: gray;
        border-color: gray;
    }
    .undo:hover,.redo:hover{
        color: dodgerblue;
        border-color: dodgerblue;
    }
    /* 文本域设置 */
    #yourcode{
        height: 100%;
        width: 100%;
        outline: none;
        resize:none;
        font-size: 26px;
        border: none;
    }
    /* 编辑器设置 */
    .CodeMirror {
        height: 100%;
    }
    .CodeMirror-scroll {
        height: auto;
        overflow-y: hidden;
        overflow-x: auto;
    }
</style>
